<template>
  <div class="custom-modal">
    <div class="modal-header">
      <div class="modal-title">选择组件</div>
      <OyButton
        iconBtnName="icon-guanbidangqianbiaoqianye"
        circle
        text
        small
        @click="handleClose"
      ></OyButton>
    </div>
    <div class="modal-content">
      <el-select v-model="cardType" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input class="margin-top20" v-model="cardSearch" placeholder="请输入">
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
      <slot></slot>
      <!-- <template v-for="item in dragList" :key="item">
        <div
          @drag="drag(item)"
          @dragend="dragend(item)"
          class="droppable-element"
          draggable="true"
          unselectable="on"
        >
          {{ item.w }}- {{ item.h }}
        </div>
      </template> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const emits = defineEmits(['close'])
const cardType = ref('')
const cardSearch = ref('')
const options = [
  { value: '1', label: '消息类' },
  { value: '2', label: '指标类' },
]
const handleClose = () => {
  emits('close')
}
</script>
